<!DOCTYPE html>
<html>
<head>
<style>
    .ball {
        width: 50px;
        height: 50px;
        background-color: rgba(241, 5, 44, 0.7); /* 半透明粉色 */
        border-radius: 50%;
        position: absolute;
        cursor: pointer;
    }
</style>
</head>
<body>

<div class="ball" id="myBall"></div>

<script>
    var ball = document.getElementById('myBall');

    ball.addEventListener('mousedown', function(e) {
        e.preventDefault();
        var offsetX = e.clientX - ball.getBoundingClientRect().left;
        var offsetY = e.clientY - ball.getBoundingClientRect().top;

        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', move);
        });

        function move(e) {
            ball.style.left = e.clientX - offsetX + 'px';
            ball.style.top = e.clientY - offsetY + 'px';
        }
    });
</script>

</body>
</html>